<template>
    <div class="bg">
        <XHeader
            :left-options="{backText:''}"
            style="background-color: #55BEC1;"
            class="tabbar"
         >精品频道
           <router-link to="/" class="fa fa-home ri" sort="right"></router-link>
        </XHeader>
        <p style="margin:47px 0 0 0"></p>

        <img :src="'/api/images/boutique/'+details.avatar" style="width:100%;height:auto;">
        <p class="introduction">{{details.introduction}}</p>

        <div class="novel" v-for="(b,i) in details.id" :key="i">
            <router-link :to="'/novel/'+b._id" style="display:flex">
                <div><img :src="'/api/images/books/'+b.avatar"></div>
                <div>
                    <p class="novel-title">{{b.name}}</p>
                    <span>{{b.category}} |</span><span>{{b.state}}</span><br>
                    <span class="novel-text">{{b.introduction}}</span>
                </div>
            </router-link>
        </div>

        <div style="height:60px;background-color:#55BEC1;line-height:60px;font-size:15px">
            <span style="color:white">联系在线客服请关注公众号：</span>
            <span style="color:red">书海小说网</span>
        </div>
    </div>
</template>

<script>
    import { XHeader } from 'vux'
    export default{
        components:{
            XHeader
        },
        data:function(){
            return {
                details:{}
            }
        },
        mounted:function(){
            this.http.get("/api/getBouDetails",{params:{id:this.$route.params.id}}).then(res=>{
                if(!res.data.err){
                    this.details = res.data.data;
                }   
            })
        }
    }
</script>

<style scoped>
    .tabbar{
        position: fixed;
        top: 0;
        z-index: 5;
        width: 100%;
    }
    .ri{
        position: absolute;
        right: 8px;
        font-size: 30px;
        top: 8px;
        color: white;
    }
    .introduction{
        font-size: 14px;
        padding: 13px 16px;
        margin: 0;
        text-align: left;
        line-height: 20px;
    }
    .novel{
        display: flex;
        padding:16px;
        background-color: white;
        border-bottom: solid 1px #ddd;
        text-align: left;
    }
    .novel img{
        width: 80px;
        height: 110px;
        margin-right: 10px;
    }
    .novel-title{
        margin:10px 0;
        color: black;
    }
    .novel span{
        font-size: 14px;
        color: #777;
    }
    .novel-text{
        display: inline-block;
        margin-top: 10px;
        height: 17px;
        width: calc(100vw - 120px);
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>